import React, { useState, useEffect } from 'react';
import { order_list, del_list, add_list, edit_list, search_list } from '../../../utils/order/api'
import './style/Order.scss'
import {
  Button,
  Form,
  Select,
  Menu,
  Space, Table, Pagination, Modal, Input
} from 'antd';


function Ordersearch(props) {
  const { Search } = Input;
  const [from] = Form.useForm()
  const [id, setId] = useState({})
  const onFinish = (values) => {
    console.log('Success:', values);
    setIsModalOpen1(false);
    edit_list(id, { name: values.name, time: values.time, phone: values.phone, status: values.status }).then((res) => {
      order_list().then((res) => {
        setArr(res.data)
        console.log(res)
      })
    })
  };
  const onSearch = (value) => {
    search_list({ name: value }).then((res) => {
      setArr(res.data)

    })
    console.log(value);
  }
  // 新增的finish
  const onFinish1 = (values) => {
    console.log('Success:', values);
    setIsModalOpen2(false);
    add_list({ name: values.name, time: values.time, phone: values.phone, status: values.status }).then((res) => {
      order_list().then((res) => {
        setArr(res.data)
        console.log(res)
      })
    })
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  var xiangq = (record) => {

    setIsModalOpen(true);
    from.setFieldsValue(record)   //对象形式(user:{data})
  }
  useEffect(() => {
    order_list().then((res) => {
      setArr(res.data)
      console.log(res)
    })
  }, [])
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 编辑的相关属性
  const [isModalOpen1, setIsModalOpen1] = useState(false);

  const handleOk1 = () => {
    setIsModalOpen1(false);
  };
  const handleCancel1 = () => {
    setIsModalOpen1(false);
  };


  // 新增相关属性
  const [isModalOpen2, setIsModalOpen2] = useState(false);

  const handleOk2 = () => {
    setIsModalOpen2(false);
  };
  const handleCancel2 = () => {
    setIsModalOpen2(false);
  };
  const [componentSize, setComponentSize] = useState('default');
  const onFormLayoutChange = ({ size }) => {
    setComponentSize(size);
  };
  const items = [
    {
      label: '全部订单',
      key: 'allorder',
    },
    {
      label: '待付款',
      key: 'waitpay',
    },
    {
      label: '待发货',
      key: 'waitsend',
    },
    {
      label: '已发货',
      key: 'hadsend',
    },
    {
      label: '已完成',
      key: 'hadall',
    },
    {
      label: '已关闭',
      key: 'hadclose',
    },
    {
      label: '售后中',
      key: 'backservice',
    },
  ];
  const columns = [
    {
      title: '订单编号',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '下单时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '微信支付',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      key: 'address',
    },

    {
      title: '合计',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => { edit(record) }}>编辑订单</a>
          <a onClick={() => { xiangq(record) }}>订单详情</a>
          <a onClick={() => { del(record) }}>删除订单</a>
        </Space>
      ),
    },
  ];

  var [arr, setArr] = useState([])

  const [current, setCurrent] = useState('mail');
  const onClick = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
  };


  // 删除单行数据
  var del = (record) => {
    console.log(record.id)
    del_list(record.id).then((res) => {
      // setArr(res.data)
      order_list().then((res) => {
        setArr(res.data)
        console.log(res)
      })
    })
  }



  // 编辑
  var edit = (record) => {
    console.log(record)
    setIsModalOpen1(true);
    from.setFieldsValue(record)
    setId(record.id)
  }



  // 增加
  var add = () => {
    setIsModalOpen2(true);

  }
  return (
    <div className='ordersearch'>
      <h1>订单查询</h1>
      <div className='block'>
        <Form
          labelCol={{
            span: 2,
          }}
          wrapperCol={{
            span: 6,
          }}
          layout="horizontal"
          initialValues={{
            size: componentSize,
          }}
          onValuesChange={onFormLayoutChange}
          size={componentSize}
          className='formone'>


          <Form.Item label="订单状态" className='form-item'>
            <Select>
              <Select.Option value="6">全部</Select.Option>
              <Select.Option value="7">待付款</Select.Option>
              <Select.Option value="8">待发货</Select.Option>
              <Select.Option value="9">已发货</Select.Option>
              <Select.Option value="10">已完成</Select.Option>
              <Select.Option value="11">已关闭</Select.Option>
              <Select.Option value="12">售后中</Select.Option>
            </Select>
          </Form.Item>

          <Space style={{
                marginBottom:30,
              }}>
            <div style={{
                marginLeft:40,
              }}>搜索商品：</div>
            <Search
              placeholder="输入要搜索的商品名字"
              onSearch={onSearch}
              style={{
                width: 200,
                // marginLeft:50
              }}
            />
          </Space>
          <Form.Item label="点击添加">
            <Button onClick={() => add()}>新增</Button>
          </Form.Item>

        </Form>
      </div>
      <div>
        <div className='top'>
          <span style={{padding:10,fontSize:20}}>订单列表</span>
        </div>
        <div>
          <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
        </div>
        <div className='middle'>
          <span>商品信息</span>
          <span>会员信息</span>
          <span>订单来源</span>
          <span>发货方式</span>
          <span>订单状态</span>
          <span>操作</span>
        </div>
        <div>
          <div>
            <Table columns={columns} dataSource={arr} pagination={false} />
            <Pagination defaultCurrent={6} total={500} />
          </div>
        </div>
        <div>
          <Modal title="详情" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            {/* 订单详情的弹出框 */}
            <Form
              disabled='true'
              form={from}
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="商品名称"
                name="name"
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="下单时间"
                name="time"
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="电话号"
                name="phone"
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="状态"
                name="status"
              >
                <Input />
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                {/* <Button type="primary" htmlType="submit">
          Submit
        </Button> */}
              </Form.Item>
            </Form>
          </Modal>
        </div>
        <div>
          <Modal title="编辑" open={isModalOpen1} onOk={handleOk1} onCancel={handleCancel1}
            footer={[]}
          >
            {/* 订单详情的弹出框 */}
            <Form
              form={from}
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="商品名称"
                name="name"
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="下单时间"
                name="time"
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="电话号"
                name="phone"
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="状态"
                name="status"
              >
                <Input />
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Button type="primary" htmlType="submit">
                  完成
                </Button>
              </Form.Item>
            </Form>
          </Modal>
        </div>
        <div>
          <Modal title="新增" open={isModalOpen2} onOk={handleOk2} onCancel={handleCancel2}
            footer={[]}
          >
            {/* 订单详情的弹出框 */}
            <Form
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish1}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="商品名称"
                name="name"
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="下单时间"
                name="time"
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="电话号"
                name="phone"
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="状态"
                name="status"
              >
                <Input />
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Button type="primary" htmlType="submit">
                  完成
                </Button>
              </Form.Item>
            </Form>
          </Modal>
        </div>
      </div>
    </div>
  );
}

export default Ordersearch;